<template>
    <div class="setupBox">
        <!-- 修改密码 -->
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
            class="demo-ruleForm">
            <el-form-item label="旧密码" :rules="[{ required: true, message: '原密码必填' }]" prop="oldpass" required>
                <el-input v-model="ruleForm.oldpass" style="width: 260px;" />
            </el-form-item>
            <el-form-item label="新密码" :rules="[{ required: true, message: '新密码必填' }]" prop="pass" required>
                <el-input v-model="ruleForm.pass" type="password" autocomplete="off" show-password
                    style="width: 260px;" />
            </el-form-item>
            <el-form-item label="确认新密码" :rules="[{ required: true, message: '确认新密码必填' }]" prop="checkPass" required>
                <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" show-password
                    style="width: 260px;" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">修改密码</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang='ts' setup>
// 引入css样式
import "../../static/css/setup/setup.css"
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { updaPass } from "../../apis/setup/setup"

const ruleFormRef = ref<FormInstance>()

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('确认新密码必填'))
    } else if (value !== ruleForm.pass) {
        callback(new Error("确认密码与确认新密码不同!"))
    } else {
        callback()
    }
}
const ruleForm = reactive({
    pass: '',
    checkPass: '',
    oldpass: '',
})
const rules = reactive({
    checkPass: [{ validator: validatePass, trigger: 'blur' }],
})

// 修改密码调接口
const upPass = async () => {
    const res: any = await updaPass(ruleForm)
    // console.log(res);
    if (res.errCode === 10000) {
        // ElMessage.success("修改成功")
        ruleForm.pass = ''
        ruleForm.checkPass = ''
        ruleForm.oldpass = ''
        sessionStorage.clear();
        ElMessage.success("请重新登录")
        setInterval(() => {
            location.reload()
        }, 1500);
    } else {
        ElMessage.error(res.errMsg)
    }
}
// 提交
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            upPass()
        } else {
            return false
        }
    })
}
// 清空
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<style scoped lang='less'>
</style>